`の間で右クリックをして「ペースト」をクリックします。
\n次のように表示されればOKです。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\n`YOUR_APPLICATION_KEY`, `YOUR_CLIENT_KEY`の部分を書き換えます。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\n先ほど準備した ニフクラ mobile backend のタブを開きましょう。
\nアプリケーションキーの「コピー」ボタンをクリックします。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nMonacaの開発画面のタブに戻ります。
\n`YOUR_APPLICATION_KEY` をダブルクリックすると文字が青くなります。その状態で右クリックをして「貼り付け」をクリックします。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nこんな感じで書き変わればOKです！続いてもう一度同じように `YOUR_CLIENT_KEY` も書き変えます。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\n再び ニフクラ mobile backend のタブを開きましょう。
\n今度は２つ目のクライアントキーの「コピー」ボタンをクリックします。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nMonacaの開発画面のタブに戻ります。
\n先ほどと同様に、`YOUR_CLIENT_KEY` をダブルクリックすると文字が青くなります。その状態で右クリックをして「貼り付け」をクリックします。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nこれでクラウドの準備は完了です🎉\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\nコメント入力機能を追加していきましょう。
\nindex.html の bodyタグ の一番下に、次の内容をコピペします。
\n\n```HTML\n

\n \n \n

\n

\n```\n\n* ダウンロードした資料のタブを開いて、次のコードをコピーする\n* Monaca開発画面に戻って index.html の bodyタグ の一番下にペーストする\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\nこんな感じになればOKです！\n\n.center[]\n\nこれで画面にコメント入力欄が追加されますが、まだボタンを押した後の処理をコーディングしていないので、ボタンを押しても何も動きません。\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\n送信ボタンを押すとメッセージが保存されていくように処理を書いていきましょう
\n先ほど書いた内容に続けて、scriptタグ （``）内に次の内容をコピペします。（さっきと同じようにやろう！）\n\n.size_small_5[\n```js\nfunction sendMessage() {\n var text = document.forms.messageForm.message.value;\n if(text.length === 0) {\n document.getElementById(\"log\").innerText = \"NG\";\n return false;\n }\n var MessageClass = ncmb.DataStore(\"MessageClass\");\n var messageClass = new MessageClass();\n messageClass.set(\"message\", text)\n .save()\n .then(function(){\n document.getElementById(\"log\").innerText = \"OK\"\n })\n .catch(function(err){\n document.getElementById(\"log\").innerText = \"Error:\" + err.code;\n });\n}\n```\n]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\nこんな感じになればOKです！\n\n.center[]\n\nこれで全て作業は完了です🎉🎉🎉正しく動くか動作を確認しましょう！\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\n.col-6[\nプレビュー画面で確認しましょう。
テストメッセージ（なんでもOK）を入力してみましょう。\n]\n.col-6[\n.center[]\n]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\n.col-6[\n「送信」ボタンを押してみましょう。
\n結果として下に「OK」と出ればOKです！\n]\n.col-6[\n.center[]\n]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\nクラウド側も確認してみましょう。ニフクラ mobile backend のタグを開きます。
\nAPIキー画面が表示されているので、「OK」をクリックして閉じましょう。\n\n.center[]\n\n---\n.bottom-bar[\n 6. TRY：コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\nダッシュボードが表示されるので、左側の「データストア」をクリックします。
\n「MessageClass」をクリックすると、入力したデータが保存されていることを確認できます。\n\n.center[]\n\n\n---\nlayout: true\nclass: center, middle, animation-fade\n---\n# 7. アプリを使って自己紹介しよう！\n\n---\nlayout: false\n\n.bottom-bar[\n 7. アプリを使って自己紹介しよう！\n]\n\n.col-7[\n作ったプロフィールアプリを使って、
自己紹介をしましょう😄\n\n* みんなのパソコンのプレビュー画面をのぞきにいきましょう！\n* コメントを残してあげましょう！\n* せっかく作ったアプリなので、勝手に書き変えたりはしないでね！\n* 終わったらクラウドに保存されたメッセージを確認しましょう！\n]\n.col-5[\n.center[]\n]\n\n---\nlayout: true\nclass: center, middle, animation-fade\n---\n# まとめ\n\n---\nlayout: false\n\n.bottom-bar[\n まとめ\n]\n\n# まとめ\n## 今日できたこと！\n\n* Monacaを使ってアプリを作った！\n * HTMLの書き方を学習\n* ニフクラ mobile backend を使ってクラウドを使ってみた！\n * クラウドにデータが保存できることを学習\n\n---\n.bottom-bar[\n まとめ\n]\n\n# まとめ\n.col-7[\n## 参考書の紹介\n\n参考書「 .font_color_ncmb_blue[**Monaca と ニフクラ mobile backend で学ぶ はじめてのプログラミング ～クラウド連携アプリ開発編～**] 」は今回少しだけ使ってみた
.color_pink[__クラウド__]の詳しい使い方がのっている学習参考書です。
今日の体験では使い方の詳しい解説はできなかったので、ぜひお家に帰ってから参考書で勉強してみてくださいね👍\n]\n.col-5[\n.center[]\n]\n", ratio: '16:9', highlightLines: true, countIncrementalSlides: false, highlightStyle: 'github' }); }